<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true"  >
      <el-form-item label="测试账号名称" prop="name">
        <el-input
            v-model="queryParams.name"
            placeholder="请输入测试账号名称"
            clearable
            @keyup.enter="pageSearch(queryParams)"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="pageSearch(queryParams)">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" >
      <el-col :span="1.5">
        <el-button
            type="primary"
            plain
            icon="Plus"
            @click="handleAdd"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
            type="info"
            plain
            icon="Download"
            @click="importEvent"
        >导入</el-button>
      </el-col>
      <el-col :span="1.5" v-loading="loading">
        <el-button
            type="success"
            plain
            icon="Upload"
            @click="exportEvent"
        >导出</el-button>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="dataList" >
      <el-table-column label="编号" align="center" prop="id" />
      <el-table-column label="测试账号名称" align="center" prop="name" :show-overflow-tooltip="true"/>
      <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
      <el-table-column label="创建时间" align="center" prop="createTime" width="180" />
      <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link size="small" type="primary" icon="Edit" @click="handleUpdate(scope.row)" >修改</el-button>
          <el-button link size="small" type="danger" icon="Delete" @click="handleDelete(scope.row)" >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="pageConfig.page"
        v-model:limit="pageConfig.size"
        @pagination="pageRefresh"
    />
    <el-dialog title="测试数据" v-model="open" width="500px" append-to-body>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="测试账号名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入测试账号名称" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer" v-loading="loading">
          <el-button @click="open=false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </template>
    </el-dialog>
    <HandleImport ref="handleImportRef" url="/tests/importTests" @importRes="importRes" :downloadApi="downloadTemplate"></HandleImport>
  </div>
</template>

<script setup>
  import { addTests, getTests, upTests, delTests ,downloadTemplate,exportTest} from "@/api/tests";
  import HandleImport from "@/components/handleImport";
  import UsePagination from "@/hooks/UsePagination";
  const { proxy } = getCurrentInstance();
  const {initData,dataList,pageSearch,total,pageConfig,pageRefresh}=UsePagination();
  const list = ref([]);
  const open = ref(false);
  const loading = ref(false);
  const handleImportRef=ref(null);
  const data = reactive({
    form: {},
    queryParams:{},
    rules: {
      name: [{ required: true, message: "名称不能为空", trigger: "blur" }]
    },
  });
  const { form, rules,queryParams } = toRefs(data);
  function handleAdd(){
    open.value=true;
    form.value={};
  }
  async function submitForm(){
    try {
      await proxy.$refs["formRef"].validate();
      loading.value=true;
      form.value.id&&await upTests(form.value);
      !form.value.id&&await addTests(form.value);
      open.value=false;
      proxy.$modal.msgSuccess(form.value.id?"修改成功":"新增成功");
      pageRefresh();
    }finally {
      loading.value=false;
    }
  }
  function handleUpdate(row){
    open.value=true;
    form.value={...row};
  }
  async function handleDelete(row){
    await proxy.$modal.confirm(`是否确定删除数据：${row.name||""}？`);
    await delTests({id:row.id});
    proxy.$modal.msgSuccess("删除成功");
    pageRefresh();
  }
  function importEvent(){
    handleImportRef.value.show();
  }
  function importRes(){
    proxy.$modal.msgSuccess("导入成功！");
    pageRefresh();
  }
  async function exportEvent(){
    await proxy.$modal.confirm(`确认导出数据项吗？`);
    try {
      loading.value=true;
      const res=await exportTest(queryParams.value);
      proxy.downFile(res);
    }finally {
      loading.value=false;
    }
  }
  onMounted(()=>{
    initData(getTests)
  })
</script>

<style scoped>

</style>